<template>
  <div class="v-editor-checkbox g-pd-l-5">
    <div class="g-flex-1 content">
      <div class="checkbox">
        <div
          v-for="(item, index) of inputs"
          :key="index"
          class="__checkbox-rows-row"
          :class="{
            selected: selected && currentIndex === index
          }"
          @click="handleClick(index)"
        >
          <el-checkbox
            v-model="item.value"
            :label="$t(getLabel(item.value))"
            size="small"
            :disabled="props.row.readonly || isModelDisabled || !selected"
            @change="handleChange"
            @click="currentIndex = index"
          ></el-checkbox>
        </div>
      </div>
      <div
        v-if="selected"
        class="_input-rows-operation-btns g-flex-0 g-lh-14 g-pd-4"
        @click.stop
        @mousedown.stop
      >
        <div>
          <img
            src="statics/icons/propertyOperation/iconadd.png"
            class="g-pointer"
            @click="handleAdd"
          />
        </div>
        <div class="g-m-t-4">
          <img
            src="statics/icons/propertyOperation/iconreduce.png"
            :class="{ disabled: isInputEmpty || isUnselected }"
            class="g-pointer"
            @click="handleDelete"
          />
        </div>
        <div class="g-m-t-4">
          <img
            src="statics/icons/propertyOperation/iconup.png"
            :class="{ disabled: isInputEmpty || currentIndex === 0 || isUnselected }"
            class="g-pointer"
            @click="handleUp"
          />
        </div>
        <div class="g-m-t-4">
          <img
            src="statics/icons/propertyOperation/icondown.png"
            :class="{ disabled: isInputEmpty || currentIndex === inputs.length - 1 || isUnselected }"
            class="g-pointer"
            @click="handleDown"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, inject, Ref, computed } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { PropertyRow } from "../../types";
import { arrayEqual } from "@/util/common";
import { modelService } from "@/modules/model/service";
import { BusEvent } from "@/constants/Enums";
import { debounce } from "lodash-es";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;
const map = new Map([
  [true, "是"],
  [false, "否"],
  [null, "空"]
]);

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

console.log("selected:", props.selected);
const inputs = reactive((props.row.value as boolean[]).map(it => ({ value: it })));

const currentIndex = ref<number>(0);

const isNotNumber = computed(() => {
  return typeof currentIndex.value !== "number";
});

const isInputEmpty = computed(() => inputs.length === 0);
const isUnselected = computed(() => currentIndex.value === -1);

const getLabel = value => {
  return map.get(value) || "空";
};

function handleClick(index: number) {
  currentIndex.value = index;
}

function handleAdd() {
  inputs.push({ value: false });
  currentIndex.value = inputs.length;
  saveValue();
}

function handleDelete() {
  if (isNotNumber.value) return;
  inputs.splice(currentIndex.value, 1);
  currentIndex.value = 0;
  saveValue();
}

function handleUp() {
  if (isNotNumber.value || currentIndex.value === 0) return;
  const cur = inputs[currentIndex.value];
  const pre = inputs[currentIndex.value - 1];
  inputs[currentIndex.value - 1] = cur;
  inputs[currentIndex.value] = pre;
  currentIndex.value--;
  saveValue();
}

function handleDown() {
  if (isNotNumber.value || currentIndex.value === inputs.length - 1) return;
  const cur = inputs[currentIndex.value];
  const next = inputs[currentIndex.value + 1];
  inputs[currentIndex.value + 1] = cur;
  inputs[currentIndex.value] = next;
  currentIndex.value++;
  saveValue();
}

const saveValue = debounce(async () => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = inputs.map(item => item.value);
  if (arrayEqual(dto.value, props.row.value as number[])) {
    return;
  }
  let res = await modelService.updateModelProperty(dto);

  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
}, 50);

function handleChange() {
  saveValue();
}
</script>

<style scoped lang="scss">
.v-editor-checkbox {
  .content {
    display: flex;
    height: 100%;
    .checkbox {
      flex: 1;
    }
    .__checkbox-rows-row {
      padding-left: 3px;
    }
    .selected {
      background-color: #186bb7;
      .el-checkbox {
        color: #fff;
      }
    }
  }
  .disabled {
    opacity: 0.5; /* 降低不透明度来表示禁用 */
    /* 或者应用灰色滤镜效果 */
    filter: grayscale(100%);
  }
  ._input-rows-operation-btns {
    border-left: 1px solid #ddd;
    height: 100%;
  }
}
</style>
